{extend name="_container/add"}
{block name="content"}
<style>
    .shadow {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    }
</style>
<input type="hidden" name="id" value="{:input('id')}">
<div style="width: 100%;display: flex;justify-content: space-between">
    <div style="width: 33%" class="shadow">
        <h3 style="text-align: center">左上方法</h3>
        <table class="layui-table">
            <tr>
                <th>方法</th>
            </tr>
            {foreach $data['top'] as $v}
            <tr>
                <td>
                    <select name="top[ ]" class="select2" style="width: 100%">
                        <option value="">请选择</option>
                        {foreach $method_arr as $method}
                        <option value="{$method.id}" {$method.id== $v ? 'selected' : ''}>{$method.full}</option>
                        {/foreach}
                    </select>
                </td>
                <td>
            </tr>
            {/foreach}
            <tr>
                <td style="display: flex;justify-content: flex-end">
                    <span class="layui-btn layui-btn-sm" onclick="add_top(this)">增加</span>
                </td>
            </tr>
        </table>

    </div>
    <div style="width: 33%" class="shadow">
        <h3 style="text-align: center">列表方法</h3>
        <table class="layui-table">
            <tr>
                <th>方法</th>
            </tr>
            {foreach $data['list'] as $v}
            <tr>
                <td>
                    <select name="list[ ]" class="select2" style="width: 100%">
                        <option value="">请选择</option>
                        {foreach $method_arr as $method}
                        <option value="{$method.id}" {$method.id== $v ? 'selected' : ''}>{$method.full}</option>
                        {/foreach}
                    </select>
                </td>
                <td>
            </tr>
            {/foreach}
            <tr>
                <td style="display: flex;justify-content: flex-end">
                    <span class="layui-btn layui-btn-sm" onclick="add_list(this)">增加</span>
                </td>
            </tr>
        </table>

    </div>
    <div style="width: 33%;" class="shadow">
        <h3 style="text-align: center">下方方法</h3>
        <table class="layui-table">
            <tr>
                <th>方法</th>
            </tr>
            {foreach $data['bottom'] as $v}
            <tr>
                <td>
                    <select name="bottom[ ]" class="select2" style="width: 100%">
                        <option value="">请选择</option>
                        {foreach $method_arr as $method}
                        <option value="{$method.id}" {$method.id== $v ? 'selected' : ''}>{$method.full}</option>
                        {/foreach}
                    </select>
                </td>
                <td>
            </tr>
            {/foreach}
            <tr>
                <td style="display: flex;justify-content: flex-end">
                    <span class="layui-btn layui-btn-sm" onclick="add_bottom(this)">增加</span>
                </td>
            </tr>
        </table>

    </div>
</div>
{/block}

{block name="js"}
<script>
    function add_top(obj) {
        let this_tr = $(obj).parents('tr');
        let html =
            `<tr>
      <td>
      <select name="top[ ]" class="select2" style="width: 100%">
      <option value="">请选择</option>
      {foreach $method_arr as $method}
      <option value="{$method.id}">{$method.full}</option>
      {/foreach}
      </select>
      </td>
      <td>
      </tr>`;
        this_tr.before(html)
        $('.select2').select2();
    }


    function add_list(obj) {
        let this_tr = $(obj).parents('tr');
        let html =
            `<tr>
      <td>
      <select name="list[ ]" class="select2" style="width: 100%">
      <option value="">请选择</option>
      {foreach $method_arr as $method}
      <option value="{$method.id}">{$method.full}</option>
      {/foreach}
      </select>
      </td>
      <td>
      </tr>`;
        this_tr.before(html)
        $('.select2').select2();
    }


    function add_bottom(obj) {
        let this_tr = $(obj).parents('tr');
        let html =
            `<tr>
      <td>
      <select name="bottom[ ]" class="select2" style="width: 100%">
      <option value="">请选择</option>
      {foreach $method_arr as $method}
      <option value="{$method.id}">{$method.full}</option>
      {/foreach}
      </select>
      </td>
      <td>
      </tr>`;
        this_tr.before(html)
        $('.select2').select2();
    }


</script>

<script>
    function save_form3(obj) {
        save_form2(obj);
        return false;
    }
</script>
{/block}
{/extend}
